<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue"  :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{roomName || '签约室'}}</block>
		</cu-custom>
		
		<view v-if="room.CS_RoomMember.length>0">
			<view class="cu-bar bg-white solid-bottom  margin-top">
				<view class="action ">
					<text class="cuIcon-title text-blue"></text>签约室成员
				</view>
				<view class="action" @click="handleEditor" v-if="room.CS_RoomMember.length>1">
					<button class="cu-btn cu-tag  line-blue round"> {{editor ? '完成' : '编辑'}} </button>
				</view>
			</view>
			
			<view class="cu-bar bg-white solid-bottom padding-left-xs padding-right-xs text-gray" style="justify-content: flex-start; flex-wrap:wrap;">
				<view class="padding-sm flex" v-for="(d, index) in room.CS_RoomMember" :key="index">
					<view class="cuIcon-friendfill text-blue" ></view>
					<text class="padding-left-xs padding-right-xs">{{d.MemberName}}</text>
					<view class="cuIcon-roundclose text-red" v-if="index!==0 && editor" @tap="deleteMember(d.MemberUserid, d.MemberName)"></view>
				</view>
				<view class="padding"  @click="showModal" data-target="addMember">
					<view class="cuIcon-roundadd text-cyan"></view>
				</view>
			</view>
			
			
			<view class="cu-bar bg-white solid-bottom  margin-top">
				<view class="action ">
					<text class="cuIcon-title text-blue"></text>签约房源
				</view>
				<view class="action ">
					<button class="cu-btn cu-tag  line-red " v-if="showHouseInfo" @click="deleteSignRoomHouse">删除</button>
					<button class=" cu-btn cu-tag line-blue round"   @click="showModal" data-target="quan_zheng_hao_Modal">{{ showHouseInfo ? '修改' : '添加'}} </button>
					
				</view>
			</view>
			
			<view v-if="!showHouseInfo" class="text-gray margin-top-xs margin-left-lg">
				你还没有有添加房屋，赶快去添加吧！
			</view>
			
			<!-- 房屋信息 -->
			<view v-if="showHouseInfo">
				<view class="cu-list menu" v-for="(item, index) in houseInfoList" :key="index">
					<view class="cu-item">
						<view class="content">
							<!-- 房子介绍，名字 -->
							<text class="cuIcon-evaluate_fill text-orange"></text><text>{{item.PlaceName}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="cuIcon-tagfill text-green"></text><text>条件</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-orange light">{{item.ConstructionArea}}㎡</view>
							<view class="cu-tag round bg-olive light">{{item.RoomType}}</view>
							<view class="cu-tag round bg-blue light">{{item.UseRange}}</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="cuIcon-locationfill text-red"></text><text>地址</text>
						</view>
						<view class="action">{{item.Address}}</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="cuIcon-peoplefill text-cyan"></text><text>房主</text>
						</view>
						<view class="action">{{item.ApplicantName}}</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="cuIcon-homefill text-pink"></text><text>产权号</text>
						</view>
						<view class="action">{{item.CertificateNo}}</view>
					</view>
				</view>			
			</view>
			
			
			<view class="padding" v-show="showHouseInfo">
				<button class="cu-btn block bg-blue margin-tb-sm lg"  @click="addContract" hover-class="btn-hover">添加合同</button>
			</view>
			
			<!-- 权证号、备案号 -->
			
			<view class="cu-modal" :class="modalName=='quan_zheng_hao_Modal'?'show':''" v-if="modalName=='quan_zheng_hao_Modal'">
				<ManageHouse  @hideModal="hideModal" :roomId="roomId" :room="room" @changeHouse="changeHouse"></ManageHouse>
			</view>
			
			<!-- 添加成员 -->
			<view class="cu-modal " :class="modalName=='addMember'?'show':''">
				<AddMember @hideModal="hideModal" :roomId="roomId" :room="room" @changeRoom="changeRoom"></AddMember>
			</view>
		</view>
		
		<view v-for="">
			
		</view>
		
		<load-progress :showProgress="showProgress"></load-progress>
	
	</view>
</template>

<script>
	import iconfont from "@/components/iconfont/inconfont.vue";
	import { searchPerson } from '@/common/api/common.js'
	import { getHouseInfo, deleteSignRoomPeople, getSignRoomInfo, deleteSignRoomHouse } from '@/common/api/zft.js'
	import AddMember from './add-member.vue'
	import ManageHouse from './manage-house.vue'
	import LoadProgress from '@/components/load-progress/load-progress.vue'
	export default {
		components: {
			iconfont,
			AddMember,
			ManageHouse,
			LoadProgress
		},
		data() {
			return {
				showProgress: true,
				editor: false,
				roomName: '签约室',
				modalName: null,
				// addMemberType: '自然人',
				addMemberTypeIndex: 0,
				// 查找到的成员列表
				addMemberSearchFindList: [],
				region: ['贵州省', '贵阳市', '南明区'],
				location: '',
				searchPlaceholder: ['请输入身份证', '社会统一信用代码/名称'],
				memberType: ['自然人','企业'],

				quan_zheng_hao: '',
				// 模态框中输入的值
				searchPersonValue: '',
				roomId: '',
				room: {
					CS_RoomMember: [],
					CS_RoomHouse: []
				},
				loading: false,
				houseInfoList: [],
			}
		},
		computed: {
			showHouseInfo() {
				return this.houseInfoList.length > 0
			}
		},
		onLoad (route) {
			console.log(route)		
			if (route.roomId) {
				this.roomName = route.roomName
				this.roomId = route.roomId
				this.ApplyName = route.ApplyName
				this.getSignRoomInfo();
			} else {
				this.showToast('当前页面存在错误，请关闭当前页面重试', 'none', 2500)
			}			
		},
		methods: {
			// randomColor()
			changeHouse (val) {
				this.houseInfoList = val;
			},
			handleEditor() {
				this.editor = !this.editor;
			},
			LoadProgress(e) {
				this.loadProgress = this.loadProgress + 3;
				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.LoadProgress();
					}, 100)
				} else {
					this.loadProgress = 0;
				}
			},
			getSignRoomInfo() {
				this.showProgress = true
				getSignRoomInfo({roomId: this.roomId}).then(({data}) => {
					console.log('签约室信息信息:', data)
					this.showProgress = false
					if (data && data.msgcode == 1000) {
						this.room = data.data;
						let houseList = data.data.CS_RoomHouse;
						if (houseList && houseList.length > 0) {
							this.getHouseInfo(houseList[0])
						}
					} else this.showToast(data.msg)
				}).catch(() => {
					this.showProgress = false
				})
			},
			RegionChange(e) {
				this.region = e.detail.value
			},
			
	
			PickerChange(e) {
				this.addMemberTypeIndex = e.detail.value
			},
			// 权证号搜索
			searchQuanZhengHao(val) {
				// this.
			},
			quan_zheng_hao__modalConfirm(val) {
				// 校验
				if (val) {
					this.quan_zheng_hao = val
					
				}
				this.hideModal()
				
			},
			showModal(e) {
				console.log(e)
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			deleteMember(uid, name) {	
				if (this.loading) return
				if (!uid) return
				uni.showModal({
					title:'温馨提示',
					content: `你确定把 ${name} 移除签约室吗？`,
					success: res => {
						
						if (res.confirm) {
							this.loading = true
							let s = {
								roomId: this.roomId,
								userId: uid
							}							
							deleteSignRoomPeople(s).then(({data}) => {
								if (data && data.msgcode == 1000) {
									this.getSignRoomInfo();
								} else {
									this.showToast(data.msg)
								}
							}).then(() => {
								this.loading = false
							})
						}
					}
				})				
				return;
				
			},
			changeRoom(e) {
				this.room = e;
			},
			
			// 删除房屋
			deleteSignRoomHouse() {
				uni.showModal({
					title:'温馨提示',
					content:'你确定删除当前签约室的房屋吗？',
					success: res => {
						if (res.confirm) {
							// RoomId=签约室ID&HouseId=房屋编号	
							let s = {
								RoomId: this.roomId,
								houseId: this.room.CS_RoomHouse[0].HouseId
							}
							deleteSignRoomHouse(s).then(({data}) => {
								console.log('删除房屋返回的数据： ', data)
								if (data && data.msgcode == 1000) {
									this.houseInfoList = [];
								} else {
									this.showToast(data.msg)
								}
							})
						}
					}
				})
				
			},
			// 获取房屋信息
			getHouseInfo(item) {
				this.showProgress = true
				// identityNo=权利人证件号码&certificateNo=权证号
				let s = { 
					identityNo: item.MemberNo,
					// identityNo: this.r
					certificateNo: item.CertificateNo
				}
				getHouseInfo(s).then(({data}) => {
					console.log('房屋信息 ：' , data)
					if (data.msgcode == 1000) {
						this.houseInfoList = data.data
					} else {
						this.showToast(data.msg)
					}
				}).then(() => {
					this.showProgress = false
				})
			},
			
			// 添加合同
			addContract() {
				this.$transmit.set({
					from: 'signRoon',
					to: 'contractEdit',
					house: this.houseInfoList[0],
					room: this.room,
				})
				this.$nextTick(() => {
					uni.navigateTo({
						url: '/pages/contract-edit/contract-edit',
						fail: () => {},
						complete: () => {}
					})
				})				
			},
		}
	}
</script>
<style scoped lang="scss">
 page {
	background: #fff;
 }

 .cu-list .cu-item {
	 
	 .content {
	 	min-width: 4em;
	 	margin-right: 20upx;
		color: #8799a3;
	 }
	 .action {
		 color: #aaaaaa;
		 font-size: 26upx;
	 }
 }

</style>